<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Reconstruction</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Define Parameters ---
        const cx = 225;
        const cy = 200;
        const r_b = 110; // Radius of the outer circle
        const r_a = 45;  // Radius of the inner circle
        const mainLineWidth = 2.5;

        // --- Set Global Drawing Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = mainLineWidth;

        // --- Draw Main Shapes ---

        // 1. Outer circle (solenoid)
        ctx.beginPath();
        ctx.arc(cx, cy, r_b, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Inner circle (rod)
        ctx.beginPath();
        ctx.arc(cx, cy, r_a, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Hatching for the inner circle
        ctx.save();
        ctx.beginPath();
        ctx.arc(cx, cy, r_a, 0, 2 * Math.PI);
        ctx.clip(); // Restrict drawing to within the inner circle
        ctx.lineWidth = 1.8;
        const hatchSpacing = 10;
        // Draw diagonal lines to create the hatching effect
        for (let i = -r_a * 1.5; i < r_a * 1.5; i += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(cx + i - r_a, cy - r_a);
            ctx.lineTo(cx + i + r_a, cy + r_a);
            ctx.stroke();
        }
        ctx.restore(); // Remove the clipping mask
        ctx.lineWidth = mainLineWidth; // Restore original line width

        // --- Draw Labels and Annotations ---

        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 4. Label 'v' at the top
        ctx.fillText('v', cx, cy - r_b - 25);

        // 5. Particle (q) and velocity arrow
        const particleX = cx;
        const particleY = cy - r_a - 6;
        const arrowLength = 30;
        const headSize = 10;

        // Arrow shaft
        ctx.beginPath();
        ctx.moveTo(particleX, particleY);
        ctx.lineTo(particleX, particleY + arrowLength);
        ctx.stroke();

        // Arrow head
        ctx.beginPath();
        ctx.moveTo(particleX, particleY + arrowLength);
        ctx.lineTo(particleX - headSize / 2, particleY + arrowLength - headSize);
        ctx.moveTo(particleX, particleY + arrowLength);
        ctx.lineTo(particleX + headSize / 2, particleY + arrowLength - headSize);
        ctx.stroke();

        // Small circle at the arrow's tail representing the particle
        ctx.beginPath();
        ctx.arc(particleX, particleY, 4, 0, 2 * Math.PI);
        ctx.fill();

        // Label 'q' for the charge
        ctx.textAlign = 'left';
        ctx.fillText('q', particleX + 10, particleY + 5);

        // 6. Dimension lines and labels
        ctx.lineWidth = 1.5;
        const tickSize = 8;
        ctx.font = 'italic 22px Times New Roman';

        // Dimension for radius 'a'
        const dim_a_line_x = cx - r_a - 20;
        ctx.beginPath();
        ctx.moveTo(dim_a_line_x, cy - r_a);
        ctx.lineTo(dim_a_line_x, cy);
        // Ticks for dimension 'a'
        ctx.moveTo(dim_a_line_x - tickSize / 2, cy - r_a);
        ctx.lineTo(dim_a_line_x + tickSize / 2, cy - r_a);
        ctx.moveTo(dim_a_line_x - tickSize / 2, cy);
        ctx.lineTo(dim_a_line_x + tickSize / 2, cy);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.fillText('a', dim_a_line_x + 8, cy - r_a / 2);

        // Dimension for radius 'b'
        const dim_b_line_x = cx + r_b + 30;
        ctx.beginPath();
        // Horizontal extension line
        ctx.moveTo(cx + r_b, cy);
        ctx.lineTo(dim_b_line_x, cy);
        // Vertical dimension line
        ctx.moveTo(dim_b_line_x, cy - r_b);
        ctx.lineTo(dim_b_line_x, cy);
        // Ticks for dimension 'b'
        ctx.moveTo(dim_b_line_x - tickSize / 2, cy - r_b);
        ctx.lineTo(dim_b_line_x + tickSize / 2, cy - r_b);
        ctx.moveTo(dim_b_line_x - tickSize / 2, cy);
        ctx.lineTo(dim_b_line_x + tickSize / 2, cy);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.fillText('b', dim_b_line_x - 8, cy - r_b / 2);

        // 7. Figure Caption
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Fig. 2.59', cx, cy + r_b + 35);

    </script>
</body>
</html>